<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浙江交工 - 组织架构</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#2563eb',
secondary: '#64748b'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<style>
body {
font-family: 'Inter', sans-serif;
min-height: 1024px;
}
.tree-node {
cursor: pointer;
transition: all 0.2s;
}
.tree-node:hover {
background-color: #f8fafc;
}
.tree-node.active {
background-color: #eff6ff;
color: #2563eb;
}
.tree-content {
margin-left: 24px;
}
input:focus {
outline: none;
}
table th, table td {
padding: 12px 16px;
text-align: left;
}
.table-container::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.table-container::-webkit-scrollbar-track {
background: #f1f1f1;
}
.table-container::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 3px;
}
</style>
</head>
<body class="bg-gray-50">
<div class="flex h-screen">
<!-- 左侧组织架构树 -->
<div class="w-80 bg-white border-r border-gray-200 flex flex-col">
<div class="p-4 border-b border-gray-200">
<h2 class="text-lg font-semibold">浙江交工组织架构</h2>
<div class="mt-4 relative">
<input type="text" placeholder="搜索组织架构" class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-button text-sm">
<i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
</div>
<div class="flex gap-2 mt-4">
<button class="flex items-center px-3 py-1.5 text-sm text-gray-600 bg-gray-50 hover:bg-gray-100 rounded-button whitespace-nowrap">
<i class="fas fa-expand-alt mr-2"></i>展开全部
</button>
<button class="flex items-center px-3 py-1.5 text-sm text-gray-600 bg-gray-50 hover:bg-gray-100 rounded-button whitespace-nowrap">
<i class="fas fa-compress-alt mr-2"></i>折叠全部
</button>
</div>
</div>
<div class="flex-1 overflow-auto p-4">
<div class="tree-node active py-2 px-3 rounded-button flex items-center">
<i class="fas fa-chevron-down mr-2 text-sm"></i>
<i class="fas fa-building mr-2 text-gray-400"></i>
<span>浙江交工</span>
</div>
<div class="tree-content">
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<i class="fas fa-chevron-right mr-2 text-sm"></i>
<i class="fas fa-layer-group mr-2 text-gray-400"></i>
<span>工程一部</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<i class="fas fa-chevron-down mr-2 text-sm"></i>
<i class="fas fa-layer-group mr-2 text-gray-400"></i>
<span>工程二部</span>
</div>
<div class="tree-content">
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-project-diagram mr-2 text-gray-400"></i>
<span>施工现场 A</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-project-diagram mr-2 text-gray-400"></i>
<span>施工现场 B</span>
</div>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<i class="fas fa-chevron-down mr-2 text-sm"></i>
<i class="fas fa-layer-group mr-2 text-gray-400"></i>
<span>工程三部</span>
</div>
<div class="tree-content">
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-video mr-2 text-gray-400"></i>
<span>摄像头-0301</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-video mr-2 text-gray-400"></i>
<span>摄像头-0302</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-video mr-2 text-gray-400"></i>
<span>摄像头-0303</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-video mr-2 text-gray-400"></i>
<span>摄像头-0304</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-video mr-2 text-gray-400"></i>
<span>摄像头-0305</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-video mr-2 text-gray-400"></i>
<span>摄像头-0306</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-video mr-2 text-gray-400"></i>
<span>摄像头-0307</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-video mr-2 text-gray-400"></i>
<span>摄像头-0308</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-video mr-2 text-gray-400"></i>
<span>摄像头-0309</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-video mr-2 text-gray-400"></i>
<span>摄像头-0310</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-video mr-2 text-gray-400"></i>
<span>摄像头-0311</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-video mr-2 text-gray-400"></i>
<span>摄像头-0312</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-video mr-2 text-gray-400"></i>
<span>摄像头-0313</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-video mr-2 text-gray-400"></i>
<span>摄像头-0314</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-video mr-2 text-gray-400"></i>
<span>摄像头-0315</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-video mr-2 text-gray-400"></i>
<span>摄像头-0316</span>
</div>
<div class="tree-node py-2 px-3 rounded-button flex items-center">
<div class="w-4 mr-2"></div>
<i class="fas fa-video mr-2 text-gray-400"></i>
<span>摄像头-0317</span>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧内容区 -->
<div class="flex-1 flex flex-col">
<div class="bg-white border-b border-gray-200 p-4">
<div class="flex items-center text-sm text-gray-500">
<span>浙江交工</span>
<i class="fas fa-chevron-right mx-2 text-xs"></i>
<span>组织架构</span>
</div>
<div class="flex justify-between items-center mt-4">
<h1 class="text-xl font-semibold">浙江交工组织架构</h1>
</div>
</div>
<div class="flex-1 overflow-auto">
<div class="p-6">
<div class="text-gray-500 text-center mt-32">请从左侧选择组织架构查看详情</div>
</div>
</div>
</div>
</div>
</body>
</html>
